<template>
  <div>
    <h1>Demo1</h1>
    数组：
    <p v-for="(item,index) in fn":key='index'>
      {{index}}---{{item}}
    </p>
    <input type="button" value="修改数组下标为二的+1" @click="fn1">
    <br>
    对象：
    <p>
      name:{{obj.name}}
      age:{{obj.age}}
    </p>
    <p v-for="item in obj">
      {{item}}
    </p>
    <input type="button" value="修改年龄+1" @click="fn2">
    <br>
    数组对象：
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>Id</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>婚否</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in fnobj" key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.magin}}</td>
          <td>
            <input type="button" value="修改">
            <input type="button" value="删除">
          </td>
        </tr>
      </tbody>
    </table>
    下拉列表
    <select>
      <option value="">请选择</option>
      <option v-bind:value="item.id" v-for="item in city":key="item.id">{{item.name}}</option>
    </select>
  </div>
</template>

<script setup lang="ts">
 import {ref,reactive} from 'vue'

  let fn=reactive([11,22,33,44]);

  let obj=reactive({
    name:'张三',
    age:21
  })

  let fnobj=reactive([
    {id:1,name:'张三',age:11,magin:false},
    {id:2,name:'李四',age:22,magin:true},
    {id:3,name:'王五',age:33,magin:false},
    {id:4,name:'赵六',age:44,magin:false}
  ])

  let city=reactive([
    {id:1,name:'河北'},
    {id:2,name:'河南'},
    {id:3,name:'山西'},
    {id:4,name:'山东'},
    {id:5,name:'北京'},
  ])

  const fn1=()=>{
    fn[2]++;
  }

  const fn2=()=>{
    obj.name='李四',
    obj.age++;
  }

  

</script>

<style scoped>

</style>